<template>
	<form class='loginView' @submit="bindLogin">
		<view class="input-view">
			<view class="label-view">
				<text class="label">手机号码</text>
			</view>
			<input class="input" type="text" placeholder="请输入邮箱" name="nameValue" />
		</view>
		<view class="input-view">
			<view class="label-view">
				<text class="label">密码</text>
			</view>
			<input class="input" password placeholder="请输入密码" name="passwordValue" />
		</view>
		<view class="button-view">
			<button type="primary" :loading="loading" class="login" formType="submit">登录</button>
		</view>
	</form>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		NAVTITLE: "登录验证",
		data() {
			return {
				loading: false
			}
		},
		methods: {
			...mapMutations(['login']),
			bindLogin(e) {				
				this.loading = true;
				let name = e.detail.value.nameValue;
			  let password = e.detail.value.passwordValue;
				console.log(name,password);
				let res = {
					"token":"admin-token",
					"username":"admin"
				}				
				this.login(res);
				uni.navigateBack();                       
			}                
    },
	}
</script>

<style>
	view {
		display: flex;
	}

	.loginView {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
		padding-top: 30upx;
	}

	.input-view {
		border-bottom-style: solid;
		border-bottom-width: 3upx;
		border-bottom-color: #ddd;
		background-color: #fff;
		flex-direction: row;
		width: 750upx;
		padding: 20upx 20upx;
		box-sizing: border-box;
	}

	.label-view {
		width: 100upx;
		height: 60upx;
		align-items: center;
		margin-right: 30upx;
	}

	.label {
		flex: 1;
		line-height: 60upx;
		font-size: 34upx;
		color: #555;
		text-align: left;
	}

	.input {
		flex: 1;
		height: 60upx;
		font-size: 34upx;
		align-items: center;
	}

	.button-view {
		width: 750upx;
		margin-top: 50upx;
		padding: 0 20upx;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	button {
		width: 710upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 34upx;
		margin-bottom: 30upx;
	}

	button.register {
		margin-top: 30upx;
		color: #ff80ab;
		background-color: #fff;
		border-color: #ff80ab;
		border-width: 2upx;
	}

	/* .register.hover,
	.login.hover {
			opacity: 0.6;
	} */
	.getPassword {
		color: #888888;
	}
</style>
